<script setup>
const route = useRouter();
const etap = useEtapWaitlist();
console.log("etap: ", etap.value)
if (etap.value == undefined) {
    console.log("etap is undefined")
    navigateTo('/lab/waitlist')
    route.onError((err) => {
        console.log("err: ", err)
    })
}
const urlHome = useUrl();
const urlCutHome = urlHome.value.substring(0, urlHome.value.length - 1);

// const image_list = useImageList();
const image_list = ref([]);
const image_link = useModalImage();
image_link.value = '';
const old_etaps = ref([]);
const isOpen = ref(false);

function getPrevEtapList() {
    const { data: prev_etaps2, pending, error, refresh } = useAsyncData(
        'prev_etaps2',
        () => $fetch(urlHome.value + 'api/it_lab/?idkv=' + etap.value.idkv, {
            headers: {
                'Access-Control-Allow-Credentials': true,
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': 'GET',
                'Access-Control-Allow-Headers': 'application/json',
            }
        }))
    old_etaps.value = prev_etaps2;
}

getPrevEtapList();

async function getImagesList() {
    if (etap.value == undefined) {
        console.log("etap is undefined")
        return;
    }
    const { data: images } = await useFetch(urlHome.value + 'lab/image_list/' + etap.value.nkv);
    console.log("images :", images)
    console.log("images_done:", images.value.image_list)
    image_list.value = images.value.image_list
    return;
}

getImagesList();

function openModalImage(image_url) {
    isOpen.value = true;
    image_link.value = image_url;
    return;
}

</script>

<template>
    <div class="px-2">
        <div class="grid lg:grod-cols-2 md:grid-cols-2 sm:grid-cols-1">
            <label class="font-sans" v-if="etap">Пациент: <b>{{ etap.value.patient.fam }} {{ etap.value.patient.im }} {{
                etap.value.patient.ot }}</b></label>
            <label class="form-label" v-if="etap">Дата рождения: <b>{{ etap.value.patient.dr }}</b></label>
            <label class="form-label" v-if="etap">Дата наряда: <b>{{ etap.value.dou }}</b></label>
            <label class="font-sans" v-if="etap">Оплата: <b>{{ etap.value.opl.name_opl }}</b></label>
            <label class="form-label" v-if="etap">Номер квитанции: <b>{{ etap.value.nkv }}</b></label>
            <label class="form-label" v-if="etap">Стоимость: <b>{{ etap.value.stu }} р.</b></label>
            <label class="form-label" v-if="etap">Врач: <b>{{ etap.value.naryad_doc.user_full.fam }} {{
                etap.value.naryad_doc.user_full.im }} {{ etap.value.naryad_doc.user_full.ot }}</b></label>
        </div>
        <hr>
        <div class="grid grid-cols-5 gap-2 md:grid-cols-6 lg:grid-cols-7" v-auto-animate>
            <div v-for="image in image_list" :key="image">
                <img :src="urlCutHome + image" @click="openModalImage(image)" alt="image">
            </div>
        </div>
        <div class="form-control">
            <label class="label">
                <span class="label-text">Комментарий:</span>
            </label>
            <UTextarea v-model="etap.value.kom_etap" color="primary" variant="outline" disabled id="kom_etap"
                name="kom_etap" placeholder="Нет комментария" />
        </div>
        <ul class="steps steps-vertical">
            <li v-for="item in old_etaps.value" class="step step-neutral break-word">
                <div class="text-left w-full">
                    <b>{{ item.sdl_etap.name_sdl }}
                        {{ item.user_etap_link.fam }} {{ item.user_etap_link.im[0] }}. {{ item.user_etap_link.ot[0] }}.</b>
                    <br>
                    <div v-if="item.kom_etap"><i>Комментарий: "{{ item.kom_etap }}"</i></div>
                </div>
            </li>
            <li v-if="etap.value.user_etap_link.login == 'none'" data-content="!" class="step step-error">
                Не назначен
            </li>
            <li v-else class="step step-accent"><b>
                    {{ etap.value.sdl_etap.name_sdl }}
                    {{ etap.value.user_etap_link.fam }}
                    {{ etap.value.user_etap_link.im[0] }}.
                    {{ etap.value.user_etap_link.ot[0] }}.
                </b>
            </li>
        </ul>
        <!-- <UModal v-model="isOpen" fullscreen>
            <UCard :ui="{
                base: 'h-full flex flex-col',
                rounded: '',
                divide: 'divide-y divide-gray-100 dark:divide-gray-800',
                body: {
                    base: 'grow'
                }
            }">
                <template #header>
                    <div class="flex items-center justify-between">

                        <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1"
                            @click="isOpen = false" />
                    </div>
                </template>
                <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
                    <img :src="urlCutHome + image_link.value" alt="image">
                </h3>
            </UCard>
        </UModal> -->
        <UModal v-model="isOpen">
            <img :src="urlCutHome + image_link.value" alt="image">
        </UModal>
    </div>
</template>